import { ava_base_url } from "@/popup/utils";
import { Descriptions, Modal, Typography } from "antd";
import dayjs from "dayjs";
import { useMemo } from "react";

const { Paragraph } = Typography;
type DetailModalProps = {
  detailVisible: boolean;
  setDetailVisible: (visible: boolean) => void;
  detail: any;
};
export const DetailModal = ({
  detailVisible,
  setDetailVisible,
  detail,
}: DetailModalProps) => {
  const typeDesc = useMemo(() => {
    let res = "";
    if (detail?.answerType === 1) {
      res += "文字";
    } else if (detail?.answerType === 2) {
      res += "语音";
    } else {
      res += "视频";
    }
    if (detail?.type === 0) {
      res = "公开" + res;
    } else if (detail?.type === 1) {
      res = "匿名" + res;
    } else {
      res = "私密" + res;
    }
    return res;
  }, [detail]);
  const answerContent = useMemo(() => {
    try {
      let cont: any = "";
      if (detail?.answerContent) {
        cont = JSON.parse(detail?.answerContent);
      }
      if (cont?.url) {
        return (
          <a
            href={ava_base_url + cont?.url}
            target="_blank"
            rel="noopener noreferrer"
          >
            {"链接🔗"}
          </a>
        );
      }
      return detail?.answerContent;
    } catch (error) {
      return detail?.answerContent;
    }
  }, [detail?.answerContent]);
  return (
    <Modal
      title="翻牌详情"
      open={detailVisible}
      footer={null}
      onCancel={() => setDetailVisible(false)}
    >
      <div>
        <Descriptions>
          <Descriptions.Item label="发送日期">
            {dayjs(Number(detail?.qtime)).format("YYYY-MM-DD HH:mm:ss")}
          </Descriptions.Item>
          <Descriptions.Item label="花销">{detail?.cost}</Descriptions.Item>
          <Descriptions.Item label="状态">
            {detail?.status === 1
              ? "进行中"
              : detail?.status === 2
              ? "已回复"
              : "已退回"}
          </Descriptions.Item>
          <Descriptions.Item label="回复日期">
            {detail?.answerTime
              ? dayjs(Number(detail?.answerTime)).format("YYYY-MM-DD HH:mm:ss")
              : "-"}
          </Descriptions.Item>
          <Descriptions.Item label="类型">{typeDesc}</Descriptions.Item>
        </Descriptions>
        <div style={{ marginTop: 10, marginBottom: 10 }}>
          <p>发送内容:</p>
          <Paragraph>
            <blockquote>{detail?.content}</blockquote>
          </Paragraph>
          <p>{detail?.baseUserInfo?.nickname} - 回复内容:</p>
          <Paragraph>
            <blockquote>{answerContent}</blockquote>
          </Paragraph>
        </div>
      </div>
    </Modal>
  );
};
